/* eslint-disable promise/always-return */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable import/no-unresolved */
/* eslint-disable import/extensions */
/* eslint-disable react/jsx-props-no-spreading */
/* eslint-disable jsx-a11y/anchor-is-valid */
import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import { Link, useNavigate } from 'react-router-dom';
import Button from '@mui/material/Button';
import CssBaseline from '@mui/material/CssBaseline';
import TextField from '@mui/material/TextField';
import FormControlLabel from '@mui/material/FormControlLabel';
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import Grid from '@mui/material/Grid';
import Box from '@mui/material/Box';
import { LockOutlined } from '@ant-design/icons';
import Typography from '@mui/material/Typography';
import Container from '@mui/material/Container';
import { getFetch, postFetch } from '@/renderer/utils/request';
import { useDispatch } from 'react-redux';
import { change } from '@/renderer/store/snackbar';
import CloseBtn from '../../components/CloseBtn';

function Copyright(props) {
  return (
    <Typography
      variant="body2"
      color="text.secondary"
      align="center"
      {...props}
    >
      {'Copyright © '}
      <a color="inherit" href="https://mui.com/" style={{ color: '#cccccc' }}>
        Your Website
      </a>{' '}
      {new Date().getFullYear()}.
    </Typography>
  );
}

export default function SignUp() {
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const handleSubmit = (event) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    const params = {
      name: data.get('name'),
      user_name: data.get('user_name'),
      password: data.get('password'),
      role_type: data.get('role_type'),
    };
    if (
      !params.name ||
      !params.user_name ||
      !params.password ||
      !params.role_type
    ) {
      dispatch(
        change({
          open: true,
          message: '请完善信息!',
          severity: 'error',
        })
      );
      return;
    }

    postFetch({ url: '/webtool/v1/user', params })
      .then((res) => {
        if (res.code !== 0) return;
        dispatch(
          change({
            open: true,
            message: '注册成功,已跳转至登录界面!',
            severity: 'success',
          })
        );
        navigate('/');
      })
      .catch((e) => {
        console.log(e);
      });
  };

  React.useEffect(() => {
    getFetch({ url: '/webtool/v1/user' });
  }, []);

  return (
    <Container component="main" maxWidth="xs">
      <CloseBtn />
      <CssBaseline />
      <Box
        sx={{
          marginTop: 8,
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
        }}
      >
        <Avatar sx={{ width: 66, height: 66, marginBottom: 2 }}>
          <LockOutlined />
        </Avatar>
        <Typography component="h1" variant="h5">
          注册
        </Typography>
        <Box component="form" noValidate onSubmit={handleSubmit} sx={{ mt: 3 }}>
          <Grid container spacing={2}>
            <Grid item xs={12}>
              <TextField
                autoComplete="name"
                name="name"
                required
                fullWidth
                id="name"
                label="姓名"
                autoFocus
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                required
                fullWidth
                id="username"
                label="用户名"
                name="user_name"
                autoComplete="username"
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                required
                fullWidth
                name="password"
                label="密码"
                type="password"
                id="password"
                autoComplete="new-password"
              />
            </Grid>
            <Grid item xs={12}>
              <RadioGroup row name="role_type">
                <FormControlLabel
                  control={<Radio value="1" color="primary" />}
                  label="铲品"
                />
                <FormControlLabel
                  control={<Radio value="2" color="primary" />}
                  label="前端"
                />
                <FormControlLabel
                  control={<Radio value="3" color="primary" />}
                  label="后端"
                />
                <FormControlLabel
                  control={<Radio value="4" color="primary" />}
                  label="撤试"
                />
              </RadioGroup>
            </Grid>
          </Grid>
          <Button
            type="submit"
            fullWidth
            variant="contained"
            sx={{ mt: 3, mb: 2 }}
          >
            注册
          </Button>
          <Grid container justifyContent="flex-end">
            <Grid item>
              <Link to="/" style={{ color: '#cccccc' }}>
                已经有号了? 立即登陆
              </Link>
            </Grid>
          </Grid>
        </Box>
      </Box>
      <Copyright
        sx={{
          position: 'fixed',
          bottom: 12,
          textAlign: 'center',
          width: '100%',
          left: 0,
        }}
      />
    </Container>
  );
}
